<template>
  <!-- 固有属性 -->
  <p><input type="text" :placeholder="username"/></p>
  <p><input type="password" :placeholder="password"/></p>
  <a :href="url">百度首页</a>
  <div :class="{active: isActive}">绑定class属性</div>
  <div :style="{color:textColor,fontSize:fontSize+'px'}">对象语法绑定样式</div>
   <div :style="[style1,style2]">数组绑定样式</div>
</template>

<script setup>
// 5s后style样式进行改变 数组 背景颜色blue padding不变 color yellow border 1px solid orange
import {ref} from "vue";
let username=ref("请输入用户名");
const password="请输入密码";
const url=" http://www.baidu.com ";
const isActive=true;
const textColor="blue";
const fontSize=30;
const style1 = { backgroundColor: "yellow", padding: "30px" };
const style2 = { color: "blue", border: "1px solid #ddd" };
setTimeout(()=>{
  username.value="请再次输入用户名";
},5000)
</script>
<style scoped>
.active{
    color: red;
}
</style>